<template>
	<div class="user-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="用户账号:" prop="userName">
							<el-input v-model="searchForm.userName" placeholder="请输入用户账号" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="用户昵称:" prop="nickName">
							<el-input v-model="searchForm.nickName" placeholder="请输入用户昵称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="手机号码:" prop="phonenumber">
							<el-input v-model="searchForm.phonenumber" placeholder="请输入手机号码" />
						</el-form-item>
					</el-col>
					<template v-if="!searchMore">
						<el-col :span="6">
							<el-form-item class="form-item" label="单位名称:" prop="deptName">
								<el-input v-model="searchForm.deptName" placeholder="请输入单位名称" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="角色名称:" prop="roleName">
								<el-input v-model="searchForm.roleName" placeholder="请输入角色名称" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="创建日期:" prop="createTimeAry">
								<el-date-picker v-model="createTimeAry" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="el-form-item" end-placeholder="截止日期" range-separator="至" start-placeholder="开始日期" type="daterange" />
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<a class="more-search" @click="searchMore = searchMore ? false : true">
								{{ searchMore ? '展开' : '收起' }}
								<el-icon>
									<component :is="searchMore ? 'ele-ArrowDown' : 'ele-ArrowUp'" color="#0052CC" />
								</el-icon>
							</a>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" rowId="userId" :loading="loading" :seqConfig="{ startIndex: (pageNum - 1) * pageSize }">
				<template #vux-search>
					<el-row :gutter="12" class="mb10">
						<el-button class="ml8" type="primary" v-has="'system:user:add'" @click="handleAdd">
							<el-icon><ele-Plus /></el-icon>
							&nbsp;新增
						</el-button>
					</el-row>
				</template>
				<template #vux-column>
					<vxe-column type="seq" title="序号" width="60" />
					<vxe-column field="userName" min-width="120" show-overflow="tooltip" title="用户账号" />
					<vxe-column field="nickName" min-width="120" show-overflow="tooltip" title="用户昵称" />
					<vxe-column field="phonenumber" min-width="150" show-overflow="tooltip" title="手机号码" />
					<vxe-column field="email" min-width="120" show-overflow="tooltip" title="用户邮箱" />
					<vxe-column field="roleName" min-width="150" :formatter="roleFormaterName" show-overflow="tooltip" title="角色名称" />
					<vxe-column field="deptName" min-width="120" show-overflow="tooltip" title="单位名称">
						<template #default="{ row }">
							{{ row.dept.deptName }}
						</template>
					</vxe-column>
					<vxe-column field="sex" min-width="150" show-overflow="tooltip" title="用户性别">
						<template #default="{ row }">
							{{ row.sex == '0' ? '男' : row.sex == '1' ? '女' : '未知' }}
						</template>
					</vxe-column>
					<vxe-column field="status" min-width="120" title="状态">
						<template #default="{ row }">
							<span style="margin-right: 10px">{{ row.status == '0' ? '正常' : '停用' }}</span>
							<el-switch active-color="#00B42A" inactive-color="#F04141" :model-value="row.status == '0' ? true : false" @change="handleSwitch(row)" />
						</template>
					</vxe-column>
					<vxe-column field="createTime" min-width="120" show-overflow="tooltip" title="创建时间" />
					<vxe-column field="loginIp" min-width="150" show-overflow="tooltip" title="最后登录IP" />
					<vxe-column field="loginDate" min-width="120" show-overflow="tooltip" title="最后登录时间" />
					<vxe-column field="operation" fixed="right" min-width="180" title="操作">
						<template #default="{ row }">
							<div class="vxe-action">
								<a @click="handleUpdate(row)" v-has="'system:user:edit'">修改</a>
								<a @click="handleResetPwd(row)" v-has="'system:user:reset'">重置密码</a>
								<a @click="handleDelete(row)" v-has="'system:user:delete'">删除</a>
							</div>
						</template>
					</vxe-column>
				</template>
			</static-table>
			<el-pagination background :current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
		<EditUserModal ref="editModalRef" @peak-modal-ok="handleModalOk" />
		<ResetPwdModal ref="resetPwdModalRef" />
	</div>
</template>
<script name="UserManage" setup>
import global from '@/utils/global'
import useTableList from '@/hooks/useTableList'
import useModal from '@/hooks/useModal'
const EditUserModal = defineAsyncComponent(() => import('./leafPages/EditUserModal.vue'))
const ResetPwdModal = defineAsyncComponent(() => import('./leafPages/ResetPwdModal.vue'))

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:11:35
 */

const state = reactive({
	searchForm: {
		userName: '',
		nickName: '',
		phonenumber: '',
		deptName: '',
		roleName: '',
		beginTime: '',
		endTime: '',
	},
	createTimeAry: [],
	resetPwdModalRef: null,
	searchFormRef: null,
})
const { searchForm, createTimeAry, resetPwdModalRef, searchFormRef } = toRefs(state)

const queryUrl = '/meta-system/web/v1/sysUser/list'
const { loading, dataCount, searchMore, handleInitQuery, getTimeParseAry, handleModalOk, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm)

const { editModalRef, handleAdd, handleUpdate } = useModal()

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-08-28 10:16:03
 */
const handleSearch = () => {
	const { beginTime, endTime } = getTimeParseAry(state.createTimeAry)
	state.searchForm.beginTime = beginTime
	state.searchForm.endTime = endTime
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	state.createTimeAry = []
	handleSearch()
}
const handleResetPwd = row => {
	state.resetPwdModalRef.handleShowModal(row)
}
const handleDelete = row => {
	global.$baseConfirm(
		row ? `是否确认删除名称为"--【${row.userName}】--"的数据?` : '是否确认删除当前选中的数据？',
		'提示',
		() => {
			global.$fetchPostData(`/meta-system/web/v1/sysUser/remove`, { removeIdList: [row.userId] }).then(data => {
				if (data.code == 200) {
					global.$baseMessage(data.msg, 'success')
					handleModalOk(2)
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
//switch 切换
const handleSwitch = row => {
	global.$baseConfirm(`是否确认更改名称为"--【${row.userName}】--"的状态?`, '提示', () => {
		const user = row
		user.status = row.status == 0 ? 1 : 0
		global.$fetchPostData(`/meta-system/web/v1/sysUser/changeStatus`, user).then(data => {
			if (data.code == 200) {
				global.$baseMessage(data.msg, 'success')
				handleModalOk(2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	})
}
const roleFormaterName = ({ row }) => {
	const rolesAry = row.roles.map(item => item.roleName)
	return rolesAry.toString()
}
</script>
<style lang="scss" scoped></style>
